import { CSSProperties, useEffect } from 'react';
import styles from './home.module.scss';
import { BallCart } from '../../components/ballCart/ballCart';
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import { fetchBallsSlice } from '../../store/balls/balls.actions';
import { FadeLoader } from 'react-spinners';

const override: CSSProperties = {
	display: 'block',
	margin: '0 auto',
	borderColor: 'red'
};

export const Home = () => {
	const dispatch = useAppDispatch();
	const { balls, loading } = useAppSelector((state) => state.balls);
	const isLoading = true;
	useEffect(() => {
		dispatch(fetchBallsSlice());
	}, [dispatch]);
	return (
		<div className={styles.container}>
			{loading ? (
				<FadeLoader
					color={'#ffa500'}
					loading={isLoading}
					cssOverride={override}
					// size={150}
					aria-label="Loading Spinner"
					data-testid="loader"
				/>
			) : (
				<>
					{balls && balls.map((ball) => <BallCart key={ball.id} ball={ball} />)}
				</>
			)}
		</div>
	);
};
